<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> 
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
  <head>
    <title>用户管理</title>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
    <meta name="description" content="Blue Moon - Responsive Admin Dashboard" />
    <meta name="keywords" content="Notifications, Admin, Dashboard, Bootstrap3, Sass, transform, CSS3, HTML5, Web design, UI Design, Responsive Dashboard, Responsive Admin, Admin Theme, Best Admin UI, Bootstrap Theme, Wrapbootstrap, Bootstrap, bootstrap.gallery" />
    <meta name="author" content="Bootstrap Gallery" />
    <link rel="shortcut icon" href="img/favicon.ico">
    
    <link href="<%=basePath %>css/bootstrap.min.css" rel="stylesheet">

    <link href="<%=basePath %>css/new.css" rel="stylesheet">
    <!-- Important. For Theming change primary-color variable in main.css  -->

    <link href="<%=basePath %>fonts/font-awesome.min.css" rel="stylesheet">

    <!-- HTML5 shiv and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="<%=basePath %>js/html5shiv.js"></script>
      <script src="<%=basePath %>js/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>

    <!-- Header Start -->
    <header>
      <a href="index.html" class="logo">
        <img src="<%=basePath %>img/logo.png" alt="Logo"/>
      </a>
      <div class="pull-right">
        <ul id="mini-nav" class="clearfix">
          <li class="list-box hidden-xs">
            <a href="#" data-toggle="modal" data-target="#modalMd">
              <span class="text-white">Code</span> <i class="fa fa-code"></i>
            </a>
            <!-- Modal -->
            <div class="modal fade" id="modalMd" tabindex="-1" role="dialog" aria-labelledby="myModalLabel5" aria-hidden="true">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title text-danger" id="myModalLabel5">Coding Style </h4>
                  </div>
                  <div class="modal-body">
                    <img src="<%=basePath %>img/documentation.png" alt="Esquare Admin">
                  </div>
                  <div class="modal-footer">
                    <button type="button" class="btn btn-danger" data-dismiss="modal"><i class="fa fa-times"></i> Close</button>
                  </div>
                </div>
              </div>
            </div>
          </li>
          <li class="list-box dropdown">
            <a id="drop5" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-film"></i>
            </a>
            <span class="info-label info-bg">9+</span>
            <ul class="dropdown-menu stats-widget clearfix">
              <li>
                <h5 class="text-success">$37895</h5>
                <p>Revenue <span class="text-success">+2%</span></p>
                <div class="progress progress-mini">
                  <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                    <span class="sr-only">40% Complete (success)</span>
                  </div>
                </div>
              </li>
              <li>
                <h5 class="text-warning">47,892</h5>
                <p>Downloads <span class="text-warning">+39%</span></p>
                <div class="progress progress-mini">
                  <div class="progress-bar progress-bar-warning" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                    <span class="sr-only">40% Complete (warning)</span>
                  </div>
                </div>
              </li>
              <li>
                <h5 class="text-danger">28214</h5>
                <p>Uploads <span class="text-danger">-7%</span></p>
                <div class="progress progress-mini">
                  <div class="progress-bar progress-bar-danger" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width: 40%">
                    <span class="sr-only">40% Complete (danger)</span>
                  </div>
                </div>
              </li>
            </ul>
          </li>
          <li class="list-box dropdown">
            <a id="drop5" href="#" role="button" class="dropdown-toggle" data-toggle="dropdown">
              <i class="fa fa-calendar"></i>
            </a>
            <span class="info-label success-bg">6</span>
            <ul class="dropdown-menu server-activity">
              <li>
                <p><i class="fa fa-flag text-info"></i> Pending request<span class="time">3 hrs</span></p>
              </li>
              <li>
                <p><i class="fa fa-fire text-warning"></i> Server Crashed<span class="time">3mins</span></p>
              </li>
              <li>
                <p><i class="fa fa-user text-success"></i> 3 New users<span class="time">1 min</span></p>
              </li>
              <li>
                <p><i class="fa fa-bell text-danger"></i>9 pending requests<span class="time">5 min</span></p>
              </li>
              <li>
                <p><i class="fa fa-plane text-info"></i> Performance<span class="time">25 min</span></p>
              </li>
              <li>
                <p><i class="fa fa-envelope text-warning"></i>12 new emails<span class="time">25 min</span></p>
              </li>
              <li>
                <p><i class="fa fa-cog icon-spin text-success"></i> Location settings<span class="time">4 hrs</span></p>
              </li>
            </ul>
          </li>
          <li class="list-box user-profile">
            <a id="drop7" href="#" role="button" class="dropdown-toggle user-avtar" data-toggle="dropdown">
              <img src="<%=basePath %>img/user5.png" alt="Bluemoon User">
            </a>
            <ul class="dropdown-menu server-activity">
              <li>
                <p><i class="fa fa-cog text-info"></i> Account Settings</p>
              </li>
              <li>
                <p><i class="fa fa-fire text-warning"></i> Payment Details</p>
              </li>
              <li>
                <div class="demo-btn-group clearfix">
                  <a href="#" data-original-title="" title="">
                    <i class="fa fa-facebook fa-lg icon-rounded info-bg"></i>
                  </a>
                  <a href="#" data-original-title="" title="">
                    <i class="fa fa-twitter fa-lg icon-rounded twitter-bg"></i>
                  </a>
                  <a href="#" data-original-title="" title="">
                    <i class="fa fa-linkedin fa-lg icon-rounded linkedin-bg"></i>
                  </a>
                  <a href="#" data-original-title="" title="">
                    <i class="fa fa-pinterest fa-lg icon-rounded danger-bg"></i>
                  </a>
                  <a href="#" data-original-title="" title="">
                    <i class="fa fa-google-plus fa-lg icon-rounded success-bg"></i>
                  </a>
                </div>
              </li>
              <li>
                <div class="demo-btn-group clearfix">
                  <button href="#" class="btn btn-danger">
                    Logout
                  </button>
                </div>
              </li>
            </ul>
          </li>
        </ul>
      </div>
    </header>
    <!-- Header End -->

    <!-- Main Container start -->
    <div class="dashboard-container">

      <div class="container">
        <!-- Top Nav Start -->
        <div id='cssmenu'>
          <ul>
            <li>
              <a href='index.html'>
                <i class="fa fa-dashboard"></i>
                Dashboard
              </a>
            </li>
            <li>
              <a href="forms.html">
                <i class="fa fa-align-justify"></i>
                Forms
              </a>
            </li>
            <li class=''>
              <a href='#'><i class="fa fa-bar-chart-o"></i>Graphs</a>
              <ul>
                 <li><a href='flot.html'>Flot Graphs</a></li>
                 <li><a href='graphs.html'>Google Graph</a></li>
                 <li><a href='vector-maps.html'>Vector Maps</a></li>
              </ul>
            </li>
            <li class=''>
              <a href='#'><i class="fa fa-flask"></i>UI Elements</a>
              <ul>
                 <li><a href='ui-elements.html'>UI Elements</a></li>
                 <li><a href='panels.html'>Panels</a></li>
                 <li><a href='notifications.html'>Notifications</a></li>
                 <li><a href='icons.html'>Icons</a></li>
              </ul>
            </li>
            <li class=''>
              <a href='#'><i class="fa fa-dashboard"></i>Extras</a>
              <ul>
                <li><a href='#'>Blog</a>
                  <ul>
                    <li><a href='blog.html'>Blog</a></li>
                    <li><a href='blog-full-page.html'>Blog Full Page</a></li>
                  </ul>
                </li>
                <li><a href='edit-profile.html'>Edit Profile</a></li>
                <li><a href='invoice.html'>Invoice</a></li>
                <li><a href='default.html'>default</a></li>
                <li><a href='#'>Submenu</a>
                  <ul>
                    <li><a href='#'>Sub Product</a></li>
                    <li><a href='#'>Sub Product</a></li>
                    <li><a href='#'>Sub Product</a></li>
                  </ul>
                </li>
                <li><a href='login.html'>Login</a></li>
                <li><a href='help.html'>Help</a></li>
                <li><a href='404.html'>404</a></li>
                <li><a href='500.html'>500</a></li>
              </ul>
            </li>
            <li class='active'>
              <a href='#'><i class="fa fa-table"></i>Tables</a>
              <ul>
                <li><a href='tables.html'>Tables</a></li>
                <li><a href='pricing.html'>Pricing Plan</a></li>
                 <li><a href='timeline.html'>Timeline</a></li>
              </ul>
            </li>
            <li>
              <a href="media.html">
                <i class="fa fa-picture-o"></i>
                Media
              </a>
            </li>
            <li class="hidden-sm">
              <a href="calendar.html">
                <i class="fa fa-calendar"></i>
                Calendar
              </a>
            </li>
            <li class="hidden-sm">
              <a href="typography.html">
                <i class="fa fa-font"></i>
                Typography
              </a>
            </li>
          </ul>
        </div>
        <!-- Top Nav End -->

        <!-- Sub Nav End -->
        <div class="sub-nav hidden-sm hidden-xs">
          <ul>
            <li><a href="" class="heading">Tables</a></li>
            <li class="hidden-sm hidden-xs">
              <a href="#" class="selected">Tables</a>
            </li>
            <li class="hidden-sm hidden-xs">
              <a href="pricing.html">Pricing Tables</a>
            </li>
          </ul>
          <div class="custom-search hidden-sm hidden-xs">
            <input type="text" class="search-query" placeholder="Search here ...">
            <i class="fa fa-search"></i>
          </div>
        </div>
        <!-- Sub Nav End -->

        <!-- Dashboard Wrapper Start -->
        <div class="dashboard-wrapper">
          
          <!-- Left Sidebar Start -->
          <div>

            <!-- Row Start -->
            <div class="row">
              <div class="col-lg-12 col-md-12">
                <div class="widget">
                  <div class="widget-header">
                    <div class="title">
                      <a id="dynamic-tables">Dynamic Tables</a>
                    </div>
                  </div>
                  <div class="widget-body">
                    <div id="dt_example" class="example_alt_pagination">
                    	<!-- table-bordered: 有没有格子-->
                      <table id="data-table" class="table table-condensed table-striped table-hover table-bordered pull-left" >
                        
                        <thead>
                          <tr>
                          	<th>
	                      		<input type="checkbox" class="no-margin" />
	                    	</th>
                            <th style="width:10%">
                           		 用户账号
                            </th>
                            <th style="width:10%">
                           		用户名	
                            </th>
                            <th style="width:16%">
                       	     	 经营类型
                            </th>
                            <th style="width:16%" class="hidden-phone">
                           		  主营业务
                            </th>
                            <th style="width:16%" class="hidden-phone">
                           		手机号码
                            </th>
                            <th style="width:16%" class="hidden-phone">
                             	 电子邮箱
                            </th>
                            <th style="width:16%" class="hidden-phone">
                             	 操作
                            </th>
                          </tr>
                        </thead>
                        <tbody>
                        <!-- 鼠标移上去变浅黄 -->
                        <tr class="gradeA warning">
                        	<td>
	                      		<input type="checkbox" class="no-margin" />
	                    	</td>
                            <td>
                              April
                            </td>
                            <td>
                              33.4 %
                            </td>
                            <td>
                              46.4 %
                            </td>
                            <td class="hidden-phone">
                              13.6 %
                            </td>
                            <td class="hidden-phone">
                              3.7 %
                            </td>
                            <td class="hidden-phone">
                              2.2 %
                            </td>
                            <td class="hidden-phone">
                              <a href="#">查看</a>
                              <a href="#">修改</a>
                              <a href="#">删除</a>
                            </td>
                          </tr>
                        <tr>
                       		<td>
	                      		<input type="checkbox" class="no-margin" />
	                    	</td>
                            <td>
                              August
                            </td>
                            <td>
                              22.4 %
                            </td>
                            <td>
                              40.6 %
                            </td>
                            <td class="hidden-phone">
                              30.3 %
                            </td>
                            <td class="hidden-phone">
                              3.8 %
                            </td>
                            <td class="hidden-phone">
                              2.3 %
                            </td>
                            <td class="hidden-phone">
                              <a href="#">查看</a>
                              <a href="#">修改</a>
                              <a href="#">删除</a>
                            </td>
                          </tr>
                          <!-- 颜色浅灰 -->
                          <tr class="gradeA success">
                          	<td>
	                      		<input type="checkbox" class="no-margin" />
	                    	</td>
                            <td>
                              December
                            </td>
                            <td>
                              14.7 %
                            </td>
                            <td>
                              31.1 %
                            </td>
                            <td class="hidden-phone">
                              46.9 %
                            </td>
                            <td class="hidden-phone">
                              4.2 %
                            </td>
                            <td class="hidden-phone">
                              2.1 %
                            </td>
                            <td class="hidden-phone">
                              <a href="#">查看</a>
                              <a href="#">修改</a>
                              <a href="#">删除</a>
                            </td>
                          </tr>
                         
                          
                        </tbody>
                      </table>
                      <div class="clearfix">
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- Row End -->



          </div>
          <!-- Left Sidebar End -->

        </div>
        <!-- Dashboard Wrapper End -->

      </div>
    </div>
    
     <!-- 添加用户 start -->
     <div id="userEditPanel" class="row col-lg-12 col-md-12 widget" style="width: 70%; height: 100%;">
           <div id="userEditTitle" class="widget-header">
             <div class="title">
               	添加用户
             </div>
           </div>
           <div class="widget-body">
             <form class="form-horizontal no-margin">
               <div class="form-group">
                 <label for="userName" class="col-sm-2 control-label">用户账号</label>
                 <div class="col-sm-10">
                   <input type="text" class="form-control" id="userName" placeholder="Name">
                 </div>
               </div>
               <div class="form-group">
                 <label for="userName" class="col-sm-2 control-label">用户密码</label>
                 <div class="col-sm-10">
                   <input type="text" class="form-control" id="userName" placeholder="Name">
                 </div>
               </div>
               <div class="form-group">
                 <label for="userName" class="col-sm-2 control-label">确认密码</label>
                 <div class="col-sm-10">
                   <input type="text" class="form-control" id="userName" placeholder="Name">
                 </div>
               </div>
               <div class="form-group">
                 <label for="userName" class="col-sm-2 control-label">用户名</label>
                 <div class="col-sm-10">
                   <input type="text" class="form-control" id="userName" placeholder="Name">
                 </div>
               </div>
               <div class="form-group">
                 <label for="userName" class="col-sm-2 control-label">真实姓名</label>
                 <div class="col-sm-10">
                   <input type="text" class="form-control" id="userName" placeholder="Name">
                 </div>
               </div>
               <div class="form-group">
                 <label for="userName" class="col-sm-2 control-label">身份证</label>
                 <div class="col-sm-10">
                   <input type="text" class="form-control" id="userName" placeholder="Name">
                 </div>
               </div>
               <div class="form-group">
                 <label for="userName" class="col-sm-2 control-label">主营业务</label>
                 <div class="col-sm-10">
                   <input type="text" class="form-control" id="userName" placeholder="Name">
                 </div>
               </div>
               <div class="form-group">
                 <label for="emailId" class="col-sm-2 control-label">Email Address</label>
                 <div class="col-sm-10">
                   <input type="email" class="form-control" id="emailId" placeholder="Email">
                 </div>
               </div>
               <div class="form-group">
                 <label for="pwd" class="col-sm-2 control-label">Password</label>
                 <div class="col-sm-10">
                   <input type="password" class="form-control" id="pwd" placeholder="Password">
                 </div>
               </div>
               <div class="form-group">
                 <label for="rptPwd" class="col-sm-2 control-label">Repeat Pwd</label>
                 <div class="col-sm-10">
                   <input type="password" class="form-control" id="rptPwd" placeholder="Password">
                 </div>
               </div>
               <div class="form-group">
                 <label for="pwd" class="col-sm-2 control-label">DOB</label>
                 <div class="col-sm-10">
                   <div class="row">
                     <div class="col-md-4 col-sm-4 col-xs-4">
                       <select id="DateOfBirthMonth" class="form-control">
                         <option>
                           - Month -
                         </option>
                         <option value="1">
                           January
                         </option>
                         <option value="2">
                           February
                         </option>
                         <option value="3">
                           March
                         </option>
                         <option value="4">
                           April
                         </option>
                         <option value="5">
                           May
                         </option>
                         <option value="6">
                           June
                         </option>
                       </select>
                     </div>
                     <div class="col-md-4 col-sm-4 col-xs-4">
                       <select name="DateOfBirth_Day"  class="form-control">
                         <option>
                           - Day -
                         </option>
                         <option value="1">
                           1
                         </option>
                         <option value="2">
                           2
                         </option>
                         <option value="3">
                           3
                         </option>
                         <option value="4">
                           4
                         </option>
                         <option value="5">
                           5
                         </option>
                         <option value="6">
                           6
                         </option>
                         <option value="7">
                           7
                         </option>
                         <option value="8">
                           8
                         </option>
                         <option value="9">
                           9
                         </option>
                         <option value="10">
                           10
                         </option>
                       </select>
                     </div>
                     <div class="col-md-4 col-sm-4 col-xs-4">
                       <select name="DateOfBirth_Year" class="form-control">
                         <option>
                           - Year -
                         </option>
                         <option value="2013">
                           2013
                         </option>
                         <option value="2012">
                           2012
                         </option>
                         <option value="2011">
                           2011
                         </option>
                         <option value="2010">
                           2010
                         </option>
                         <option value="2009">
                           2009
                         </option>
                         <option value="2008">
                           2008
                         </option>
                         <option value="2007">
                           2007
                         </option>
                         <option value="2006">
                           2006
                         </option>
                         <option value="2005">
                           2005
                         </option>
                       </select>
                     </div>
                   </div>
                 </div>
               </div>
               <div class="form-group">
                 <label for="country" class="col-sm-2 control-label">Country/Region</label>
                 <div class="col-sm-10">
                   <select id="country" class="form-control">
                     <option value="">
                       Country...
                     </option>
                     <option value="Afganistan">
                       Afghanistan
                     </option>
                     <option value="Albania">
                       Albania
                     </option>
                     <option value="Australia">
                       Australia
                     </option>
                     <option value="Austria">
                       Austria
                     </option>
                     <option value="Chile">
                       Chile
                     </option>
                     <option value="China">
                       China
                     </option>
                     <option value="India">
                       India
                     </option>
                     <option value="Indonesia">
                       Indonesia
                     </option>
                     <option value="Korea Sout">
                       Korea South
                     </option>
                     <option value="Kuwait">
                       Kuwait
                     </option>
                     <option value="Macau">
                       Macau
                     </option>
                     <option value="Malaysia">
                       Malaysia
                     </option>
                     <option value="Malawi">
                       Malawi
                     </option>
                     <option value="Maldives">
                       Maldives
                     </option>
                     <option value="Mali">
                       Mali
                     </option>
                     <option value="Malta">
                       Malta
                     </option>
                     <option value="Mayotte">
                       Mayotte
                     </option>
                     <option value="Zaire">
                       Zaire
                     </option>
                     <option value="Zambia">
                       Zambia
                     </option>
                     <option value="Zimbabwe">
                       Zimbabwe
                     </option>
                   </select>
                 </div>
               </div>
               <div class="form-group">
                 <div class="col-sm-offset-2 col-sm-10">
                   <div class="checkbox">
                     <label>
                       <input type="checkbox"> Yes! I would like to receive email relating to products and services.
                     </label>
                   </div>
                 </div>
               </div>
               <div class="form-group">
                 <div class="col-sm-offset-2 col-sm-10">
                   <div class="checkbox">
                     <label>
                       <input type="checkbox"> Remember Me :).
                     </label>
                   </div>
                 </div>
               </div>
               <div class="form-group">
                 <div class="col-sm-offset-2 col-sm-10">
                   <button type="submit" class="btn btn-info">Create Account</button>
                 </div>
               </div>
             </form>
       </div>
     </div>
    <!-- Row End -->
    <!-- Main Container end -->

    <script src="<%=basePath %>js/jquery.js"></script>
    <script src="<%=basePath %>js/bootstrap.min.js"></script>
    <script src="<%=basePath %>js/jquery.scrollUp.js"></script>
    <script src="<%=basePath %>js/jquery.datatables.js"></script>
    <script src="<%=basePath %>js/move.js"></script>
	
    <!-- Custom JS -->
    <script src="<%=basePath %>js/menu.js"></script>
    
    <script type="text/javascript">
      //ScrollUp
      $(function () {
        $.scrollUp({
          scrollName: 'scrollUp', // Element ID
          topDistance: '300', // Distance from top before showing element (px)
          topSpeed: 300, // Speed back to top (ms)
          animation: 'fade', // Fade, slide, none
          animationInSpeed: 400, // Animation in speed (ms)
          animationOutSpeed: 400, // Animation out speed (ms)
          scrollText: 'Top', // Text for element
          activeOverlay: false, // Set CSS color to display scrollUp active point, e.g '#00FFFF'
        });
      });

      //Tooltip
      $('a').tooltip('hide');

      //Popover
      $('.popover-pop').popover('hide');

      //Dropdown
      $('.dropdown-toggle').dropdown();

      //Data Tables
      $(document).ready(function () {
    	  
        $('#data-table').dataTable({
          "sPaginationType": "full_numbers"
        });
        $('#userEditPanel').css("display","hidden")
//         $('#userEditPanel').css("top","1")
       	$.Move($('#userEditTitle'));
      });
      
    </script>

  </body>
</html>